<!DOCTYPE html>
<head>
    <title>成功了！</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
    <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>

</head>
<body>
    <h1>
        看到这条消息，说明服务器启动成功！
    </h1>
    <div class="row clearfix">
        <div class="col-md-6">
            <div class="input-group">
                <div class="input-group-prepend">
                    <span class="input-group-text">UID：</span>
                </div>
                <input class="form-control" type="number" id="useruid" placeholder="10086" aria-label="UID">
            </div>
        </div>
        <div class="col-md-6">
            <div class="input-group">
                <div class="input-group-prepend">
                    <span class="input-group-text">用户名：</span>
                </div>
                <input class="form-control" type="text" id="username" placeholder="张三" aria-label="用户名">
            </div>
        </div>
    </div>
    <input class="form-control" type="text" name="msg" id=msgtosend placeholder="在这里输入要发送的内容">
    <button class="btn btn-primary" type="button" onclick="con()">点我连接</button>
    <button class="btn btn-secondary" type="submit" onclick="send()">点我发送</button>
    <div class="msg">
    </div>
    
    <script type="text/javascript">
        var inter=null;
        function heartbeat() {
            $.ajax({
                url:"/webuser/heartbeat",
                type:"GET",
                dataType:"text",
                success:function(res){
                    if (res=="false") {
                        console.log("心跳连接失败");
                        window.clearInterval(inter);
                        inter=null;
                    } else {
                        console.log("心跳成功");
                    }
                },
                error:function(res){
                    console.log("心跳连接失败");
                    window.clearInterval(inter);
                    inter=null;
                }
            });
        }
        function con() {
            var name=document.getElementById("username").value;
            var uuid=document.getElementById("useruid").value;

            if (name=="") {
                name="张三";
            }
            if (uuid=="") {
                uuid="10086";
            }
            $.ajax({
                url:"/webuser/login",
                data:{"name":name, "uid":uuid},
                type:"POST",
                dataType:"text",
                success:function(res){
                    if (res=="true") {
                        console.log("登录成功");
                        inter=setInterval(heartbeat, 10000);
                        setTimeout(recv, 500);
                    } else {
                        console.log("登录失败");
                    }
                },
                error:function(res){
                    console.log("登录失败");
                }
            });
        }
        function send() {
            if (inter) {
                if (document.getElementById("msgtosend").value=="") {
                    return;
                }
                $.ajax({
                    url:"/webuser/send",
                    data:{"msg":document.getElementById("msgtosend").value},
                    type:"POST",
                    dataType:"text",
                    success:function(res){
                        if (res=="true") {
                            console.log("发送成功");
                        } else {
                            console.log("发送失败");
                        }
                    },
                    error:function(res){
                        console.log("发送失败");
                        
                    }
                });
                document.getElementById("msgtosend").value="";
            }else{
                console.log("未连接");
            }         
        }
        function recv() {
            $.ajax({
                url:"/webuser/query",
                type:"GET",
                success:function(res) {
                    console.log(res);
                    if (res) {
                        var data= $.parseJSON(res);
                        if (data["code"]) {
                            $(".msg")[0].innerText+=decodeURIComponent(data["data"])+"\n";
                        }
                    }
                    setTimeout(recv, 500);
                },
                error:function(res) {
                    console.log("查询失败");
                    if (inter) {
                        setTimeout(recv, 500);
                    }
                }
            });
        }
    </script>
</body>